<template>
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    width="900px"
    @close="btnCancel"
  >
    <el-row type="flex" style="padding: 10px 0px">
      <el-col><span>【题型】：{{ previewList.questionType }}</span></el-col>
      <el-col><span>【编号】：{{ previewList.id }}</span></el-col>
      <el-col><span>【难度】：{{ previewList.difficulty }}</span></el-col>
      <el-col><span>【标签】：{{ previewList.tags }}</span></el-col>
    </el-row>
    <el-row type="flex" style="padding: 10px 0">
      <el-col><span>【学科】：{{ previewList.subjectName }}</span></el-col>
      <el-col><span>【目录】：{{ previewList.directoryName }}</span></el-col>
      <el-col><span>【方向】：{{ previewList.direction }}</span></el-col>
      <el-col><span></span></el-col>
    </el-row>
    <hr />
    <el-row>
      <span>【题干】：</span>
      <p style="color: blue">{{ previewList.question }}</p>
      <el-row v-if="previewList.questionType !== '简答题'">
        <el-col>{{ previewList.questionType }} 选项：（以下选中的选项为正确答案）</el-col>
        <el-col>
          <el-checkbox-group v-model="checkpreviewList" class="country-group">
            <el-checkbox :label="item.isRight" class="inputH" v-for="item in this.previewList.options" :key="item.id">{{ item.title }}</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </el-row>
    <hr />
    <el-row style="padding: 10px 0px">
      <el-col>【参考答案】：<el-button type="danger" size="small" @click="showVide = true">视频答案预览</el-button></el-col>
      <!-- 视频解析 -->
      <el-col v-if="showVide">
        <video :src="previewList.videoURL" controls width="400" height="300"></video>
      </el-col>
    </el-row>
    <hr />
    <el-row type="flex" style="padding: 10px 0px">
      <el-col>【答案解析】：{{ previewList.answer }}</el-col>
    </el-row>
    <hr />
    <el-row type="flex" style="padding: 10px 0px">
      <el-col>【题目备注】：{{ previewList.remarks }}</el-col>
    </el-row>
    <!-- 关闭按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="btnCancel">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'QuestionsPreview',
  data () {
    return {
      showVide: false,
      checkpreviewList: [1]
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    previewList: {
      type: Object,
      required: true
    }
  },
  methods: {
    btnCancel () {
      this.$emit('update:show-dialog', false)
      this.showVide = false
      // this.previewList = []
    }
  }
}
</script>

<style scoped >
  .inputH {
    padding: 8px 0;
    pointer-events: none
  }
  .country-group {
      display: flex;
      flex-direction: column;
  }
</style>
